<template>
	<view class="play-mode-selector">
		<view class="selector-header">
			<text class="title">{{ $t('playlist.playMode') || '播放模式' }}</text>
		</view>
		
		<view class="mode-options">
			<view 
				class="mode-option" 
				:class="{ active: currentMode === 0 }"
				@click="selectMode(0)"
			>
				<uni-icons type="loop" size="20" :color="currentMode === 0 ? '#007AFF' : '#666'"></uni-icons>
				<text class="mode-text">{{ $t('playlist.mode.sequential') || '顺序播放' }}</text>
			</view>
			
			<view 
				class="mode-option" 
				:class="{ active: currentMode === 1 }"
				@click="selectMode(1)"
			>
				<uni-icons type="shuffle" size="20" :color="currentMode === 1 ? '#007AFF' : '#666'"></uni-icons>
				<text class="mode-text">{{ $t('playlist.mode.random') || '随机播放' }}</text>
			</view>
			
			<view 
				class="mode-option" 
				:class="{ active: currentMode === 2 }"
				@click="selectMode(2)"
			>
				<uni-icons type="refreshempty" size="20" :color="currentMode === 2 ? '#007AFF' : '#666'"></uni-icons>
				<text class="mode-text">{{ $t('playlist.mode.single_loop') || '单曲循环' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import playlistApi from '@/api/playlist.js'

export default {
	name: 'PlayModeSelector',
	props: {
		deviceId: {
			type: String,
			required: true
		},
		initialMode: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			currentMode: this.initialMode,
			loading: false
		}
	},
	watch: {
		initialMode(newVal) {
			this.currentMode = newVal
		}
	},
	methods: {
		/**
		 * 选择播放模式
		 * @param {number} mode 播放模式：0-顺序，1-随机，2-单曲循环
		 */
		async selectMode(mode) {
			if (this.loading || this.currentMode === mode) {
				return
			}
			
			this.loading = true
			
			try {
				console.log('[PLAY_MODE] 切换播放模式:', { deviceId: this.deviceId, playMode: mode })
				
				const result = await playlistApi.updatePlayMode({
					deviceId: this.deviceId,
					playMode: mode
				})
				
				console.log('[PLAY_MODE] 播放模式更新结果:', result)
				
				if (result.errCode === 0) {
					this.currentMode = mode
					
					// 显示成功提示
					uni.showToast({
						title: result.data.playModeName || '播放模式已更新',
						icon: 'success',
						duration: 2000
					})
					
					// 发送事件通知父组件
					this.$emit('modeChanged', {
						deviceId: this.deviceId,
						playMode: mode,
						playModeName: result.data.playModeName,
						isNewPlaylist: result.data.isNewPlaylist
					})
					
				} else {
					console.error('[PLAY_MODE] 播放模式更新失败:', result.errMsg)
					uni.showToast({
						title: result.errMsg || '播放模式更新失败',
						icon: 'none',
						duration: 3000
					})
				}
				
			} catch (error) {
				console.error('[PLAY_MODE] 播放模式更新异常:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none',
					duration: 3000
				})
			} finally {
				this.loading = false
			}
		},
		
		/**
		 * 获取当前播放模式名称
		 */
		getCurrentModeName() {
			const modeNames = {
				0: this.$t('playlist.mode.sequential') || '顺序播放',
				1: this.$t('playlist.mode.random') || '随机播放',
				2: this.$t('playlist.mode.single_loop') || '单曲循环'
			}
			return modeNames[this.currentMode] || '未知模式'
		}
	}
}
</script>

<style lang="scss" scoped>
.play-mode-selector {
	padding: 20rpx;
	background: #fff;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	
	.selector-header {
		margin-bottom: 24rpx;
		
		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}
	
	.mode-options {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		
		.mode-option {
			display: flex;
			align-items: center;
			padding: 24rpx 32rpx;
			border-radius: 12rpx;
			border: 2rpx solid #eee;
			background: #fafafa;
			transition: all 0.3s ease;
			
			&.active {
				border-color: #007AFF;
				background: #f0f8ff;
			}
			
			&:active {
				transform: scale(0.98);
			}
			
			.mode-text {
				margin-left: 16rpx;
				font-size: 28rpx;
				color: #333;
			}
		}
	}
}

/* 适配暗色模式 */
@media (prefers-color-scheme: dark) {
	.play-mode-selector {
		background: #1c1c1e;
		
		.selector-header .title {
			color: #fff;
		}
		
		.mode-options .mode-option {
			background: #2c2c2e;
			border-color: #444;
			
			&.active {
				background: #1a365d;
				border-color: #007AFF;
			}
			
			.mode-text {
				color: #fff;
			}
		}
	}
}
</style>
